<template>
  <panel title="密码修改">
    <el-form class="form-horizontal" :model="passwordDto" :rules="passwordRules" label-width="100px"
             ref="passwordForm">
      <el-form-item prop="userName">
        <el-input placeholder="用户名" v-model="passwordDto.userName" auto-complete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="原密码" type="password" v-model="passwordDto.password" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item prop="newPwd">
        <el-input placeholder="新密码" type="password" v-model="passwordDto.newPwd" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item prop="confirmPwd">
        <el-input placeholder="确认密码" type="password" v-model="passwordDto.confirmPwd" auto-complete="off"></el-input>
      </el-form-item>
      <div style="position: relative">
        <el-button @click="onBtnCancel()" style="position:absolute;top:2px;left:200px">取消
        </el-button>
        <el-button id="1" type="primary" @click="onBtnSubmit()" style="position:absolute;top:2px;left:340px">确认
        </el-button>
      </div>
    </el-form>
  </panel>
</template>

<script>
  import Panel from '@/components/common/Panel'
  import ElRow from 'element-ui/packages/row/src/row'
  import ElCol from 'element-ui/packages/col/src/col'
  import {getUserId, getName} from '@/utils/token'
  import {apiChangePassword} from '@/api/login'
  import {encrypt} from '../../utils/encrypt'

  export default {
    components: {
      ElCol,
      ElRow,
      Panel
    },
    computed: {},
    created () {
      this.passwordFlag = false
    },
    data () {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.passwordDto.newPwd) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        passwordDto: {
          userName: getName(),
          userId: getUserId(),
          password: '',
          newPwd: '',
          confirmPwd: ''
        },
        tableLoadingFlag: false,
        passwordFlag: false,
        isPassword: false,
        passwordRules: {
          password: [
            {required: true, message: '请填写原密码', trigger: 'blur'},
            {min: 6, message: '长度不少于6个字符', trigger: 'blur'}
          ],
          newPwd: [
            {required: true, message: '请填写新密码', trigger: 'blur'},
            {
              pattern: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/,
              message: '密码包含 数字,英文,字符中的两种以上，长度6-20',
              trigger: 'blur'
            }
          ],
          confirmPwd: [
            {validator: validatePass, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      onBtnCancel () {
        this.$refs['passwordForm'].resetFields()
      },
      onBtnSubmit () {
        this.$refs['passwordForm'].validate(valid => {
          if (valid) {
            this.passwordDto.userId = getUserId()
            let dto = {
              userName: this.passwordDto.userName,
              userId: this.passwordDto.userId,
              password: this.passwordDto.password,
              newPwd: this.passwordDto.newPwd
            }
            dto.password = encrypt(dto.password)
            dto.newPwd = encrypt(dto.newPwd)
            apiChangePassword(dto).then(() => {
              this.$alert('密码修改成功,即将返回登录页面', '返回登录页面', {
                confirmButtonText: '确定',
                callback: () => {
                  this.$store.dispatch('Logout').then(() => {
                    this.$router.push('/login')
                  })
                }
              })
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
